<template>
    <div class="tabs-container">
        <el-tabs  v-model="activeTab" type="card" class="class-view" @tab-click="handleTabClick">
            <el-tab-pane v-for="tab in tabsList"
                :key="tab.path"  :label="tab.title" :name="tab.path" closable
                @close="handleTabClose(tab.path)" />
            
        </el-tabs>
    </div>
</template>
<script setup>
import { useTabsStore } from '@/store/tabs.js'
import { useRouter    } from  'vue-router'

const tabsStore = useTabsStore();
const router = useRouter();

const { tabsList,activeTab }  = tabsStore;

//处理标签点击
const handleTabClick =(tab)=>{
    router.push(tab.name);
    tabsStore.changeTab(tab.name);
}

//处理标签关闭
const handleTabClose = (path)=>{
    tabsStore.removeTab(path);
    router.push(tabsStore.activeTab);
}
</script>
<style scoped lang="scss">
.tabs-container {
  width: 100%;
  height: 100%;
  padding: 0 10px;
}

.tabs-view {
  height: 100%;
}

:deep(.el-tabs__nav-wrap) {
  height: 100%;
}

:deep(.el-tabs__nav) {
  height: 100%;
}

:deep(.el-tabs__item) {
  height: 60px;
  line-height: 60px;
  padding: 0 15px;
}
</style>